<template>
  <div class="tag-album-item">
    <tag-content-header summary search add refresh @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span class="title-text">我的标签专辑</span>
      </template>
      <!-- display: block -->
      <template #summary>
        根据使用需要创建数据专辑，将数据表添加至指定专辑，便于数据分类管理及批量分享。
      </template>
    </tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
    >
      <template #albumNm="{scope}">
        <span class="click-item" @click="gotoDetial(scope.row)">{{ scope.row.albumNm }}</span>
      </template>
      <template #usage="{scope}">
        <div class="info-box">
          <el-tooltip
            effect="dark"
            :content="'关注' + (scope.row.albumWatchCount || 0)"
            placement="top"
            :enterable="false"
          >
            <span><i class="el-icon-star-on"></i>{{ scope.row.albumWatchCount || 0 }}</span>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            :content="'分享' + (scope.row.albumShareCount || 0)"
            placement="top"
            :enterable="false"
          >
            <span><icon-svg class="el-share" name="iconShare"></icon-svg>{{ scope.row.albumShareCount || 0 }}</span>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            :content="'评论' + (scope.row.albumCommentCount || 0)"
            placement="top"
            :enterable="false"
          >
            <span
              ><icon-svg class="el-discuss" name="iconEvaluate"></icon-svg> {{ scope.row.albumCommentCount || 0 }}</span
            >
          </el-tooltip>
        </div>
      </template>
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <!-- <el-tooltip effect="dark" content="设置公开等级" placement="top" :enterable="false">
              <icon-svg name="iconKey" class="el-key" @click.native="handleEdit('levelDialog', scope.row)"></icon-svg>
            </el-tooltip> -->
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <icon-svg name="iconEdit" class="svg-edit" @click.native="handleEdit('albumDialog', scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="分享" placement="top" :enterable="false">
            <icon-svg name="iconShare" class="el-share" @click.native="handleEdit('shareDialog', scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <i class="el-icon-delete" @click="handleDelete(scope.row)"></i>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
    <album-dialog ref="albumDialog" @callback="getList"></album-dialog>
    <!-- <level-dialog ref="levelDialog" @callback="getList"></level-dialog> -->
    <share-dialog ref="shareDialog" :assetId="selectAsset"></share-dialog>
  </div>
</template>

<script>
import market from '../utils/market.js'
import albumDialog from '../album/album-edit-drawer'
// import levelDialog from '../album/change-level-item'
import shareDialog from '../album/share-album-drawer'
export default {
  components: {
    // levelDialog,
    shareDialog,
    albumDialog
  },
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '名称',
          prop: 'albumNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '公开等级',
          prop: 'openLevel',
          dict: 'album_open_level',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '数量',
          prop: 'tagCount',
          align: 'center'
        },
        {
          show: true,
          label: '备注',
          prop: 'albumDesc',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '使用信息',
          prop: 'usage',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      selectAsset: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.params.queryParams.userId = this.$store.state.user.id
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/albumList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
        case 'add':
          // 新增动作
          this.$refs.albumDialog.showDrawer({ type: 'add' })
          break
      }
    },
    handleEdit(dialog, scope) {
      if (dialog === 'shareDialog') {
        this.selectAsset = scope.assetAlbumId
        this.$nextTick(() => this.$refs[dialog].showDrawer())
      } else {
        let dataAsset = {
          type: 'edit',
          dataAssetId: scope.assetAlbumId,
          cname: scope.albumNm,
          desc: scope.albumDesc,
          openLevel: scope.openLevel
        }
        this.$refs[dialog].showDrawer(dataAsset)
      }
    },
    handleDelete(scope) {
      this.$confirm(`确定删除专辑【${scope.albumNm}】?`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astAlbum/${scope.assetAlbumId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.data || data.msg)
            this.getList()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    },
    gotoDetial(item) {
      let routeName = market.typeToRoute(Number(3))
      this.$blank(routeName, { params: { id: item.assetAlbumId } })
    }
  }
}
</script>

<style lang="scss">
.tag-album-item {
  padding: 0 20px;
  .no-records {
    margin: 100px auto;
    text-align: center;
    p {
      margin: 30px 0 20px 0;
      color: #a7a6a6;
    }
  }
  .info-box span {
    display: inline-block;
    margin-right: 10px;
    i {
      font-size: 18px;
      vertical-align: middle;
      margin-top: -5px;
      &.el-icon-star-on {
        color: #fae429;
      }
    }
    svg {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin: -5px 5px 0 0;
      &.el-praise {
        color: #31c048;
      }
      &.el-share {
        color: #232063;
      }
      &.el-discuss {
        color: #3196c0;
      }
    }
  }
  .operation-button-box {
    svg {
      &.el-key {
        color: #ffa062;
      }
      &.el-share {
        color: #232063;
      }
    }
    .el-icon-edit-outline {
      color: #7783c2;
    }
    .el-icon-delete {
      color: #f5a623;
    }
  }
}
</style>
